<template>
  <div id="main">

    <el-container>
      <el-header id="head">
        <el-row>
          <el-col :span="6" id="head_1">用户：{{user_name}}</el-col>
          <el-col :span="12" id="head3" v-if="is_chat">正在和 {{to_name}} 聊天</el-col>
          <el-col :span="6" id="head_2" v-if="is_chat">{{status}}</el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="1000px">

          <div id="div1">
            <ul>
              <li v-for="item in msg_list"  style="list-style-type:none;">{{item.fromName}}:{{item.content}}</li>
            </ul>
          </div>

          <div id="div2">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-button round size="small" @click="send">send</el-button>
          </div>

        </el-aside>
        <el-main>

          <div id="div3">
          </div>

          <div id="div4">
            好友列表<br>
            <ul v-for="item in user_list" :value="item" @click="showChat(item)">
              <li>
                {{item}}
              </li>
            </ul>
          </div>

          <div id="div5">
            系统广播<br>
            <ul v-for="item in user_list" :value="item" @click="showChat(item)">
              <li>
                你的好友 {{item}} 已经上线了
              </li>
            </ul>
          </div>

        </el-main>
      </el-container>
    </el-container>


  </div>
</template>

<script>
  export default {
    name: "ChatRoom",
    data(){
      return{
        user_name: '未登录账号', //当前用户
        to_name: '未登录账号', //信息发送的目标用户
        status: '离线',
        is_chat: false,
        input:'',
        user_list: [],
        receive_list:[],//接收到的消息
        send_list: [],//发送的消息
        msg_list: [], //储存的消息，点击用户清空
        ws: null,

      }
    },
    methods: {

      showChat(item){
        this.msg_list = [];
        this.is_chat = true;
        this.to_name = item;
        this.status = '在线';
        this.msg_list = [];
      },
      init(){

        this.user_name = localStorage.getItem('user');
        this.ws = new WebSocket('ws://localhost:7777/chat');

        this.ws.onopen = function () {
          console.log('websocket连接建立成功！');
        }

        this.ws.onclose = function () {
          console.log('websocket连接已经关闭');
        }

        this.ws.onmessage = evt=>{
          console.log('websocket接收到消息了');
          let array1 = [];
          let array2 = [];
          let msg = JSON.parse(evt.data);

          if(msg.sysMsg){
            array1 = msg.content;
            for(let i=0;i<array1.length; i++){
              if(array1[i]!= this.user_name){
                array2.push(
                  array1[i]
                )
              }
            }

            this.user_list = array2;

          }else{
            console.log('非系统消息');
            this.msg_list.push(msg);
            console.log(msg);





          }
        }

      },
      send(){

        console.log(this.input);
        console.log(this.user_name);
        console.log(this.to_name);

        let json = {
          "fromName" : this.user_name,
          "toName" : this.to_name,
          "content" : this.input
        }

        this.ws.send(JSON.stringify(json));
        this.msg_list.push(json);

        this.input = '';

      }

    },
    created: function () {
      this.init();
    }


  }
</script>

<style scoped>

  #main{
    width:1500px;
    margin: 0 auto;
  }

  #div1{
    height:500px;



  }

  #div2{
    height:300px;


  }

  #div3{
    height:100px;

  }

  #div4{
    height:300px;

  }

  #div5{
    height:400px;

  }

  #head{
    background-color: black;
    height: 200px;
  }

  #head_1{
    text-align: left;
    color: #f9fafc;
  }

  #head_2{
    text-align: right;
    color: #f9fafc;
  }

  #head3{
    text-align: center;
    color: #f9fafc;
  }


  ul {list-style:none;margin:0px;}
  ul li
  {
    line-height:30px;
  }



  .el-header {
    background-color: #B3C0D1;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    line-height: 200px;
    border:1px solid;
  }

  .el-main {
    line-height: 160px;
    border:1px solid;
  }

</style>
